import 'package:flutter/material.dart';
import 'shopModel.dart';
import 'deviceModel.dart';

typedef collectionCallback = void Function();
class ShopRowWidget extends StatelessWidget {

  final ShopModel model;
  final collectionCallback collectionOnTap;

  const ShopRowWidget({this.model,Key key,this.collectionOnTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(left: 10,right: 15),
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  InkWell(
                    onTap: (){
                      collectionOnTap();
                    },
                    child: model.isCollection ? Image.asset('images/star_solid.png') : Image.asset('images/star_hollow.png'),
                  ),
                  SizedBox(width: 12,),
                  Text('${model.name}',style: TextStyle(fontSize: 15,fontWeight: FontWeight.w500),)
                ],
              ),
              Image.asset('images/work_device_list.png'),
            ],
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 15,right: 10),
          color: Color.fromRGBO(228, 232, 238, 1),
          height: 1,
        ),
        GridView.builder(
          padding: EdgeInsets.only(left: 15,right: 15,top: 15,bottom: 10),
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: model.devices.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount:2,
            mainAxisSpacing:15,
            crossAxisSpacing:15,
            childAspectRatio:5,
          ),
          itemBuilder: (BuildContext context,int index){
            DeviceModel device = model.devices[index];
            return Container(
              decoration: BoxDecoration(
                color: Color.fromRGBO(222, 237, 255, 1),
                border: Border.all(color: Color.fromRGBO(132, 187, 255, 1),width: 1),
              ),
              child: Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  SizedBox(width: 10),
                  Image.asset('images/muDevice_online.png'),
                  SizedBox(width: 10),
                  Expanded(
                    child: Text(
                      '${device.name}',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  )
                ],
              ),
            );
          },
        )
      ],
    );
  }
}